<template>
    <button class="app-jump-button" :open-type="props.openType" hover-class="none"
        :style="{ 'background-color': `${backgroundColor ? backgroundColor : ''}` }" @click="jump">
        <slot></slot>
    </button>
</template>

<script setup lang='ts' name="AppJumpButton">
import { useLogin, usePage } from '@/hooks'

/**平台自带 */
export type BaseOpenType = 'feedback' | 'share' | 'getUserInfo' | 'contact' | 'getPhoneNumber' | 'new' | 'launchApp' | 'openSetting' | 'chooseAvatar' | 'uploadDouyinVideo' | 'getAuthorize' | 'lifestyle' | 'contactShare' | 'openGroupProfile' | 'openGuildProfile' | 'openPublicProfile' | 'shareMessageToFriend' | 'addFriend' | 'addColorSign' | 'addGroupApp' | 'addToFavorites' | 'chooseAddress' | 'chooseInvoiceTitle' | 'login' | 'subscribe' | 'favorite' | 'watchLater' | 'openProfile'

export interface AppJumpButtonProps {
    /**路由地址 */
    url?: string
    /**携带参数 */
    params?: Record<string, unknown>
    /**开放类型 */
    openType?: BaseOpenType | 'app_reLaunch' | 'app_redirect' | 'app_navigate' | 'app_back' | 'app_tel' | 'app_clear_cache' | 'app_map'
    /**背景色 */
    backgroundColor?: `#${string}`,
    /**是登录 */
    isLogin?: boolean
    /**纬度，范围为-90~90，负数表示南纬 */
    latitude?: string | number
    /**经度，范围为-180~180，负数表示西经 */
    longitude?: string | number
    /**地址的详细说明 */
    address?: string,
    /**前置回调(return可终止后续执行) */
    after?: () => void,
    /**后置回调 */
    before?: () => void
}

const props = withDefaults(defineProps<AppJumpButtonProps>(), {
    openType: 'app_navigate',
    isLogin: false,
    latitude: 116.397477,
    longitude: 39.908692,
    address: '天安门',
})

const jump = () => {
    const { redirect, reLaunch, navigate, back } = usePage()
    const { isLogin, toLoginPage } = useLogin()
    if (props.isLogin && !isLogin.value) {
        return toLoginPage()
    }
    props.after && props.after()
    switch (props.openType) {
        case 'app_reLaunch':
            if (!props.url) return
            reLaunch(props.url, props.params)
            break;
        case 'app_redirect':
            if (!props.url) return
            redirect(props.url, props.params)
            break;
        case 'app_navigate':
            if (!props.url) return
            navigate(props.url, props.params)
            break;
        case 'app_back':
            back()
            break;
        case 'app_map':
            if (!props.latitude && !props.longitude) return
            uni.openLocation({
                latitude: +props.latitude,
                longitude: +props.longitude,
                name: props.address,
                address: props.address
            });
            break;
        case 'app_tel':
            if (props.params && Object.keys(props.params).length) {
                uni.makePhoneCall({
                    phoneNumber: props.params.value as string
                });
            }
            break;
    }
    props.before && props.before()
}

</script>

<style scoped lang="scss">
.app-jump-button {
    line-height: inherit;
    text-align: inherit;
    padding: 0 0;
    background: transparent;
    border: none;
    border-radius: 0;
    overflow: inherit;
    font-size: inherit;
    color: inherit;

    &::after {
        display: none;
        border: none;
    }
}
</style>